<template>
  <a-card :bordered="false">
    <div class="title">应用管理(最近10条)</div>
    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
    </div>
    <a-table
      ref="table"
      size="middle"
      rowKey="id"
      :columns="columns"
      :dataSource="dataSource"
      :loading="loading"
      :pagination="false"
      class="j-table-force-nowrap"
    >
      <span slot="action" slot-scope="text, record">
        <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
          <a>删除</a>
        </a-popconfirm>
      </span>
      <span slot="type" slot-scope="text">
        <span v-if="text === 'ANDROID'">收银App-安卓版</span>
      </span>
      <span slot="desc" slot-scope="text">
        <div style="white-space: pre-wrap;text-align:left;">{{text}}</div>
      </span>
    </a-table>
    <AppModal ref="modalForm" @ok="loadData"></AppModal>
  </a-card>

  <!-- 表单区域 -->
</template>

<script>
import { postAction, deleteAction } from '@/api/manage'
import AppModal from './modules/appModal'

export default {
  name: 'appList',
  components: {
    AppModal,
  },
  data() {
    return {
      title: '应用管理',
      visible: false,
      model: {},
      /* 查询条件-请不要在queryParam中声明非字符串值的属性 */
      queryParam: {},
      /* 数据源 */
      dataSource: [],
      /* table加载状态 */
      loading: false,
      // 表头
      columns: [
        {
          title: '名称',
          align: 'center',
          dataIndex: 'type',
          scopedSlots: { customRender: 'type' },
        },
        {
          title: '版本号',
          align: 'center',
          dataIndex: 'version',
        },
        {
          title: '下载链接',
          align: 'center',
          dataIndex: 'url',
        },
        {
          title: '更新说明',
          align: 'center',
          dataIndex: 'desc',
          scopedSlots: { customRender: 'desc' },
        },
        {
          title: '上传时间',
          align: 'center',
          dataIndex: 'createTime',
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' },
        },
      ],
      url: {
        list: '/thirdapi/app/list',
        delete: '/thirdapi/app/delete',
      },
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    getQueryParams() {
      return { pageNo: 1, pageSize: 10 }
    },
    loadData() {
      if (!this.url.list) {
        this.$message.error('请设置url.list属性!')
        return
      }

      var params = this.getQueryParams() //查询条件
      this.loading = true
      postAction(this.url.list, params)
        .then((res) => {
          if (res.success) {
            this.dataSource = res.result.records || res.result
          } else {
            this.$message.warning(res.message)
          }
        })
        .finally(() => {
          this.loading = false
        })
    },
    handleDelete(id) {
      this.loading = true
      deleteAction(this.url.delete, { id: id })
        .then((res) => {
          if (res.success) {
            this.$message.success('操作成功')
            this.loadData()
          } else {
            this.$message.warn(res.message)
          }
        })
        .finally(() => (this.loading = false))
    },
    handleAdd() {
      this.$refs.modalForm.add()
      this.$refs.modalForm.title = '新增'
      this.$refs.modalForm.disableSubmit = false
    },
  },
}
</script>
<style lang="less" scoped>
@import '~@assets/less/common.less';
.title {
  color: rgba(0, 0, 0, 0.85);
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 16px;
}
</style>